<template>
  <div class="vacation">
    <TitleHeader title="假期" event-name="添加员工" @add="setStaff">
      <template #center>
        <div class="center">
          <el-button type="primary" :text="!switchState" round class="flex-1" @click="setState(true)">列表</el-button>
          <el-button type="primary" :text="switchState" round class="flex-1" @click="setState(false)">状态</el-button>
        </div>
      </template>
    </TitleHeader>
    <div class="state_body flex-1">
      <VacationMain v-show="switchState" />
      <VacationState v-show="!switchState" />
    </div>
    <Dialog v-model:visible="staff">
      <div class="dialog__center">
        <img src="@/assets/imgs/staff.png" />
        <label>
          <span>员工邮箱</span>
          <el-input type="email" v-model="addEmail" />
        </label>
      </div>
      <template #footer>
        <el-button type="primary" @click="addStaff">确认添加</el-button>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import TitleHeader from '@/components/titleHeader/index.vue';
import VacationMain from './vacation-main.vue';
import VacationState from './vacation_state.vue';
import Dialog from '@/components/dialog/index.vue';
import { ref } from 'vue';

// false 状态   true 列表
const switchState = ref(true)
const staff = ref(false)
const addEmail = ref("")


function setStaff() {
  staff.value = true;
}
function addStaff() {
  staff.value = false;

}
// 切换状态
function setState(state: boolean) {
  if (switchState.value == state) return;
  switchState.value = state;
}


</script>

<style lang="scss" scoped>
.vacation {
  display: flex;
  flex-direction: column;
  flex: 1;

  .center {
    width: 200px;
    height: 40px;
    border-radius: 40px;
    background-color: rgba($color: #000000, $alpha: .1);
    display: flex;
    align-items: center;
    justify-content: center;

    :deep(.el-button) {
      height: 100%;
      padding: 0;
      margin: 0;

      &.is-text {
        color: black;
      }

    }
  }

  .state_body {
    position: relative;
  }

  .dialog__center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    >label {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
  }
}
</style>